/**
var cat = new WOGUCat({
    'container' : '#wrap',
    'fields' : ['provinceid', 'cityid', 'areaid'],
    'defaults' : {
        'provinceid' : '浙江省',
        'cityid' : '绍兴市',
        'areaid' : '诸暨市'
    },
    'displays' : {
        //'provinceid' : false
    },
    'useDefaultOption' : true,
    'defaultOptionTexts' : {
        'provinceid' : '请选择省份',
        'cityid' : '请选择城市',
        'areaid' : '请选择地区'
    },
    'defaultOptionValue' : -1,//不能为0，否则会引起冲突
    'defaultOptionText' : '请选择',
    'alwaysShow' : false
});
cat.show();
*/
var WOGUCatInstanceNum{$toppid} = 0;
var WOGUCat{$toppid} = function(options) {
    var data = {$data};
    var instancenum = WOGUCatInstanceNum{$toppid}++;
    var fields = options.fields || ['provinceid', 'cityid', 'areaid'];//字段
    var displays = options.displays || {};//是否显示
    var defaults = options.defaults || {};//默认地区
    var container = options.container || '';//容器
    var useDefaultOption = options.useDefaultOption === false ? false : true;//是否加入默认option
    var defaultOptionTextG = options.defaultOptionText || '请选择';
    var defaultOptionValue = options.defaultOptionValue || -1;//默认option的值，不能为0，否则会引起冲突
    var defaultOptionTexts = options.defaultOptionTexts || {};//默认option的显示文本
    var alwaysShow = options.alwaysShow === false ? false : true;//数据为空时是否显示占位的select
    if(container == '') return;
    
    function bulid(areaid, fieldid, isinit) {
        isinit = isinit || false;
        for(var i in fields) {
            if(i > fieldid) {
                var areas = data[areaid];
                var field = fields[i];
                var wrapid = '#wrap_'+field+'_'+instancenum;
                if($(wrapid).length == 0) {
                    $(container).append('<div id="wrap_'+field+'_'+instancenum+'" style="float:left;"></div>');
                }
                
                if(areas) {
                    areaid = buildSelect(areas, i, field, isinit);
                } else if(alwaysShow) {
                    var defaultOptionText = defaultOptionTexts[field] || defaultOptionTextG;
                    $(wrapid).html('<select name="'+field+'"><option value="'+defaultOptionValue+'">'+defaultOptionText+'</option></select>');
                } else {
                    $(wrapid).html('');
                }
            }
        }
    }
    
    function buildSelect(areas, fieldid, field, isinit) {
        var nextareaid = 0;
        var firstareaid = 0;
        var defaultarea = defaults[field] && isinit ? defaults[field] : '';
        var display = displays[field] === false ? false : true;
        var html = '<select id="'+field+'_'+instancenum+'" name="'+field+'">';
        if(useDefaultOption) {
            var defaultOptionText = defaultOptionTexts[field] || defaultOptionTextG;
            html += '<option value="'+defaultOptionValue+'">'+defaultOptionText+'</option>';
            if(defaultarea == '') nextareaid = defaultOptionValue;
        }
        for(var m in areas) {
            html += '<option value="'+m+'"'+(defaultarea == areas[m] ? ' selected' : '')+'>'+areas[m]+'</option>';
            if(firstareaid == 0) firstareaid = m;
            if(nextareaid == 0) {
                if(defaultarea == '') nextareaid = m;
                else if(defaultarea == areas[m]) nextareaid = m;
            }
        }
        nextareaid = nextareaid == 0 ? firstareaid : nextareaid;
        html += '</select>';
        areaid = nextareaid;
        if(display) {
            var wrapid = '#wrap_'+field+'_'+instancenum;
            $(wrapid).html(html);
            var select = $('#'+field+'_'+instancenum);
            select.change(function(s) {
                bulid(select.val(), fieldid);
            });
        }
        
        return nextareaid;
    }
    
    this.show = function() {
        bulid({$toppid}, -1, true);
    }
}
